<template>
  <div class="container">
    <ul>
      <li class="title common">扫码下载</li>
      <li class="code common">
        <img :src="pic" alt="" class="img" />
      </li>
      <li class="msg common bottom">app随时练习新题库</li>
      <li class="bottom common">关注微信</li>
      <li class="bottom common">关注微博</li>
      <li class="bottom common">意见反馈</li>
      <li @click="toTop" class="to-top common">返回顶部</li>
    </ul>
  </div>
</template>

<script setup>
import pic from "../assets/pic2.png";

function toTop() {
  window.scrollTo({
    top: 0,
    behavior: "smooth",
  });
}
</script>

<style scoped>
li {
  cursor: pointer;
  min-height: 40px;
}

.bottom::after {
  border-bottom: 1px solid rgb(123, 123, 123);
}

.common {
  width: fit-content;
  margin: 0 auto;
}

.title {
  padding-top: 8px;
  margin-bottom: 4px;
}

.msg {
  font-size: 14px;
  color: rgb(198, 198, 198);
}

.img {
  width: 150px;
  height: 150px;
}

.container {
  position: fixed;
  right: 0;
  bottom: 100px;
  z-index: 10;
  width: 170px;
  min-height: 260px;
  border: 1px solid gray;
  background-color: rgb(255, 255, 255);
}
</style>
